<!--
 * @Author: 王灿
 * @Date: 2019-11-26 20:43:08
 * @LastEditTime: 2019-12-01 19:51:22
 * @Description: 咨询操作
 * @FilePath: \scarlet-sparrow-admin\src\views\configure\configure-inform\inform-operate\index.vue
 -->
 <template>
  <happy-scroll color="rgba(0,0,0,0)" size="5" :resize="true" class="inform-operate">
    <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
      <!-- 标题 -->
      <el-form-item prop="title">
        <el-row>
          <el-input v-model="ruleForm.title" placeholder="咨询标题" clearable></el-input>
        </el-row>
      </el-form-item>
      <!-- 类别 -->
      <el-form-item prop="category">
        <el-row>
          <el-select v-model="ruleForm.category" clearable placeholder="咨询类别">
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-row>
      </el-form-item>
      <!-- 上传组件 -->
      <el-form-item prop="mainPic">
        <el-row>
          <jq-upload :upData="picObj" :fileList="fileList" @onChangeImageKey="onChangeImageKey" />
        </el-row>
      </el-form-item>
      <el-form-item prop="content">
        <!-- 富文本 -->
        <el-row class="el-form__quill">
          <jq-tinymce
            ref="editor"
            v-model="ruleForm.content"
            :isUpdate="isUpdate"
            :minHeight="400"
            @input="onGetEditorValue"
          />
        </el-row>
      </el-form-item>
      <!-- 浏览量 -->
      <el-form-item prop="browseNum" v-if="row.id">
        <el-row>
          <el-input v-model.number="ruleForm.browseNum" placeholder="浏览量" clearable></el-input>
        </el-row>
      </el-form-item>
      <!-- 点赞数 -->
      <el-form-item prop="praisePoints" v-if="row.id">
        <el-row>
          <el-input v-model.number="ruleForm.praisePoints" placeholder="点赞数" clearable></el-input>
        </el-row>
      </el-form-item>
      <el-form-item class="dialog-footer">
        <el-button type="primary" @click="onSubmitForm('ruleForm')">确 定</el-button>
        <el-button @click="onCancelForm('ruleForm')">取 消</el-button>
      </el-form-item>
    </el-form>
  </happy-scroll>
</template>
<script>
import JqUpload from '@/components/jq-upload/index.vue'
import JqTinymce from '@/components/jq-tinymce/index.vue'
import { getInformAdd, getInformUpdate } from '@/api/configure.js'
import { getDownUrl } from '@/api/commodity.js'
export default {
  name: 'InformOperate',
  components: { JqUpload, JqTinymce },
  props: {
    // 默认数据
    row: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      id: '',
      ruleForm: {
        title: '',
        mainPic: '',
        content: '',
        category: '',
        browseNum: 0,
        praisePoints: 0
      },
      rules: {
        title: [{ required: true, message: '请输入咨询标题', trigger: 'blur' }],
        mainPic: [{ required: true, message: '请上传主图', trigger: 'blur' }],
        content: [{ required: true, message: '请输入详情', trigger: 'blur' }],
        category: [{ required: true, message: '请选择类别', trigger: 'blur' }],
        browseNum: [{ required: true, message: '请输入浏览量', trigger: 'blur' }],
        praisePoints: [{ required: true, message: '请输入点赞数', trigger: 'blur' }]
      },
      fileList: [],
      picObj: {
        label: '咨询主图',
        accept: 'image/png, image/gif, image/jpg, image/jpeg',
        limit: 1,
        type: 1,
        isImage: true
      },
      isUpdate: false,
      categoryOptions: [
        { value: 0, label: '早报' },
        { value: 1, label: '疾病常识' },
        { value: 2, label: '健康养生' },
        { value: 3, label: '洞察世界' }
      ]
    }
  },
  watch: {
    // 获取默认数据
    row() {
      this.isUpdate = false
      this.onGetRow()
    }
  },
  created() {
    this.onGetRow()
  },
  methods: {
    // 默认数据
    onGetRow() {
      this.fileList = []
      let boolean = JSON.stringify(this.row) !== '{}'
      this.id = boolean ? this.row.id : ''
      this.ruleForm.title = boolean ? this.row.title : ''
      this.ruleForm.mainPic = boolean ? this.row.mainPic : ''
      this.ruleForm.content = boolean ? this.row.content : ''
      this.ruleForm.category = boolean ? this.row.category : ''
      if (boolean) {
        // 下载图片
        getDownUrl({
          fileName: this.row.mainPic
        }).then(res => {
          this.fileList.push({ name: this.row.mainPic, url: res.data.url.split("?")[0] })
        })
      }
    },
    // 赋值富文本
    onGetEditorValue(data) {
      this.isUpdate = true
      this.ruleForm.content = data
    },
    // 子组件传值
    onChangeImageKey(fileName, type, isDetele, url) {
      this.ruleForm.mainPic = fileName
    },
    // 提交
    onSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.row.id) {
            // 编辑
            let form = new FormData()
            form.append('id', this.id)
            form.append('title', this.ruleForm.title)
            form.append('mainPic', this.ruleForm.mainPic)
            form.append('content', this.ruleForm.content)
            form.append('category', this.ruleForm.category)
            form.append('browseNum', this.ruleForm.browseNum)
            form.append('praisePoints', this.ruleForm.praisePoints)
            getInformUpdate(form).then(res => {
              this.$notify.success({
                title: '提示',
                message: '编辑成功'
              })
              this.onRefresh()
            })
          } else {
            // 新增
            getInformAdd(this.ruleForm).then(res => {
              this.$notify.success({
                title: '提示',
                message: '创建成功'
              })
              this.onRefresh()
            })
          }
        }
      })
    },
    // 取消
    onCancelForm(formName) {
      this.$refs[formName].resetFields()
      let data = { isShow: false, isRefresh: false }
      this.$emit('onCancelBtn', data)
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        let data = { isShow: false, isRefresh: true }
        this.$emit('onCancelBtn', data)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form__quill {
  width: 100%;
  margin-top: 10px;
}
</style>

<style lang="scss">
.inform-operate {
  height: 100%;
  .el-form {
    width: 100%;
    .el-select {
      width: 100%;
    }
    .el-cascader {
      width: 100%;
      line-height: 30px;
    }
    .dialog-footer {
      @include row;
      justify-content: flex-end;
      margin-top: 22px;
    }
  }
}
</style>
